<template>
	<view style="position: relative;">
		<u-form-item :key="item.key" :label="$t(item.label)" :required="item.required" label-align="left">
			<!-- :wrap="true" -->
			<u-radio-group v-model="radio" @change="radioGroupChange" :wrap="item.wrap">
				<u-radio v-for="(radioItem, radioIndex) in radioList[type]" :key="radioIndex"
					:checked="radioItem.checked" :name="radioItem.name" active-color="#D62F13">
					{{ radioItem.name }}
				</u-radio>
			</u-radio-group>

			<u-button v-if="item.explain" type="warning" size="mini" style="position: absolute;right: 10rpx;top: 90rpx;"
				@click="clickIcon(item)">{{$t("释义")}}
			</u-button>
			<view style="clear: both;"></view>
		</u-form-item>
		<u-popup v-model="show">
			<view
				style="width: 90%;margin-left:5%; margin-top: 60rpx; line-height: 36rpx; text-align: center; font-size: 32rpx;font-weight: bold;">
				{{ $t(explainTitle)||'' }}</view>
			<view
				style="width: 90%;margin-left:5%; margin-top: 20rpx; line-height: 36rpx; text-align: center; font-size: 28rpx;">
				{{ $t(explain)||'' }}</view>
			<button @click="guanbi" style="margin-top: 50rpx;width: 80%;">
				{{$t('关闭')}}
			</button>
		</u-popup>
	</view>
</template>
<script>
	export default {
		props: {
			item: {
				type: Object,
				default: {},
				required: true
			},
			postunit: {
				type: [Array, Object, Number, String],
				default: ''
			},
			hwjbfb: {
				type: [Array, Object, Number, String],
				default: '0'
			},
		},
		data() {
			return {
				show: false,
				explainTitle: '',
				explain: '',
				lang: getApp().globalData.lang,
				type: 'default',
				radio: '否',
				radioList: {
					default: [ // 默认 是否单选
						{
							name: this.$t("否"),
							value: '1',
							checked: false
						},
						{
							name: this.$t("是"),
							value: '2',
							checked: false
						}
					],
					marginType: [ // 金额单位
						{
							name: this.$t("元"),
							value: '1',
							checked: true
						},
						// {
						// 	name: this.$t("卢布"),
						// 	value: '2',
						// 	checked: false
						// }
					],
					priceUnit: [ // 价格单位
						{
							name: this.$t("元"),
							value: '元',
							checked: true
						},
						{
							name: this.$t("卢布"),
							value: '卢布',
							checked: false
						}
					],
					speedUnit: [ // 速度单位
						{
							name: '天',
							value: '天',
							checked: true
						},
						// {
						//     name: '小时',
						//     value: '小时',
						//     checked: false
						// },
						// {
						//     name: '月',
						//     value: '月',
						//     checked: false
						// }
					],
					numberUnit: []
				},
			};
		},
		async mounted() {
			console.log(this.item)
			if (this.item.details && this.item.details.type) {
				if (this.item.details.type === 'numberUnit') {
					console.log(11111111)
					await this.getList()
				}
				this.type = this.item.details.type
			} else {
				this.type = "default"
			}
			this.setDefaultValue()
		},
		watch: {
			item: {
				async handler(val) {
					if (this.item.details && this.item.details.type) {
						if (this.item.details.type === 'numberUnit') {
							await this.getList()
						}
						this.type = this.item.details.type
					} else {
						this.type = "default"
					}
					this.setDefaultValue()
				},
				deep: true,
			},
			postunit: {
				handler(culVal) {
					this.radio = culVal
				},
				immediate: true,
			},
		},
		methods: {
			async getList() {
				uni.showLoading({
					title: "loading...",
					mask: true
				})
				const that = this
				const data = await this.$u.api.basic.getUnitList()
				uni.hideLoading()
				const formatData = data.map(item => {
					return {
						name: item[this.$t('item.name')],
						value: item[this.$t('item.name')],
						checked: false
					}
				})
				this.$set(this.radioList, 'numberUnit', formatData)
			},
			setDefaultValue() { // 设置默认值
				let radioList = this.radioList[this.type]
				for (let i = 0; i < radioList.length; i++) {
					if (this.item.value === radioList[i].value) {
						this.radio = radioList[i].name
						this.radioGroupChange(this.radio)
					}
				}
			},
			radioGroupChange(e) {
				console.log(this.hwjbfb)
				let radioList = this.radioList[this.type]
				for (let i = 0; i < radioList.length; i++) {
					if (e === radioList[i].name) {
						if (this.hwjbfb == 1) {
							this.$emit('change', this.item.key, radioList[i].value)
						} else {
							this.$emit('change', this.item.key, radioList[i].value)
						}
					}
				}
			},
			clickIcon(item) {
				if (item.explain) {
					let me = this;
					me.explainTitle = item.explainTitle
					me.explain = item.explain
					me.show = true
				}
			},
			guanbi() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
</style>